<template>
  <div>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="应用ID">
        <el-input v-model="formData.appId" placeholder="查询应用ID"></el-input>
      </el-form-item>
      <el-form-item label="应用名称">
        <el-input v-model="formData.appName" placeholder="查询应用名称"></el-input>
      </el-form-item>
      <el-form-item label="应用状态">
        <el-select v-model="formData.state">
          <el-option value="">全部</el-option>
          <el-option :value="0" label="未审核应用"></el-option>
          <el-option :value="1" label="已上线应用"></el-option>
          <el-option :value="2" label="已下线应用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="success" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%" align="center" height="700">
      <el-table-column prop="clientId" label="应用ID" fixed="left" align="center"></el-table-column>
      <el-table-column prop="appName" label="应用名称" align="center"></el-table-column>
      <el-table-column prop="grantType" label="授权模式" align="center"></el-table-column>
      <el-table-column prop="scope" label="授权范围" align="center"></el-table-column>
      <el-table-column prop="redirectUrl" show-overflow-tooltip label="回调地址" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="state" label="应用状态" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.state === 0">未审核</el-tag>
          <el-tag type="success" v-if="scope.row.state === 1">已上线</el-tag>
          <el-tag type="danger" v-if="scope.row.state === 2">已下线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state === 0" type="success" @click="updateState(scope.row.clientId, 1)">审核
          </el-button>
          <el-button v-if="scope.row.state === 1" type="danger" @click="updateState(scope.row.clientId, 2)">下线
          </el-button>
          <el-button v-if="scope.row.state === 2" type="primary" @click="updateState(scope.row.clientId, 1)">上线
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="增加Oauth应用" :visible="dialogVisible" width="30%">
      <Oauth ref="oauth" @close="submitSuccess()"></Oauth>
      <div style="display: flex;justify-content: flex-end">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Oauth from "@/views/oauth/Oauth";

export default {
  name: "OauthList",
  components: {Oauth},
  data: function () {
    return {
      formData: {
        appId: '',
        appName: '',
        state: ''
      },
      tableData: [],
      dialogVisible: false
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    query() {
      this.$AxiosUtil.postJson(process.env.VUE_APP_AUTH_SERVER + '/oauth/list', JSON.stringify(this.formData)).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      })
    },
    submitData() {
      this.$refs['oauth'].onSubmit()
    },
    submitSuccess() {
      this.dialogVisible = false
      this.query();
    },
    updateState(clientId, state) {
      let that = this;
      this.$AxiosUtil.postJson(process.env.VUE_APP_AUTH_SERVER + '/oauth/update',
        {clientId: clientId, state: state}).then(res => {
        if (res.code === 200) {
          that.$message.success(res.msg)
          that.query()
        } else {
          that.$message.error(res.msg)
        }
      }).catch(() => {
        that.$message.error("更新失败")
      })
    }
  }
}
</script>

<style scoped>

</style>
